<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>日志列表</title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}"/>
    <style>
        .layui-table-box .fs13 {
            font-size: 13px !important;
        }

        .layui-table-box button {
            font-size: 13px !important;
        }

        pre {
            outline: 1px solid #ccc;
            padding: 5px;
            margin: 5px;
        }

        /* json 样式 */
        .string {
            color: green;
        }

        /*字符串的样式*/
        .number {
            color: darkorange;
        }

        /*数字的样式*/
        .boolean {
            color: blue;
        }

        /*布尔型数据的样式*/
        .null {
            color: magenta;
        }

        /*null值的样式*/
        .key {
            color: red;
        }

        /*key值的样式*/
    </style>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab" lay-filter="tab">
            <ul class="layui-tab-title">
                <!-- <li >数据库备份</li> -->
                <li class="layui-this">在线用户</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="user-table2" lay-filter="user-table2"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- json展示弹窗 -->
<div id="showJson" style="display: none">
    <pre id="result"></pre>
</div>

<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="delete">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="download">
        <i class="layui-icon layui-icon-download-circle"></i>
    </button>
</script>

<script type="text/html" id="user-bar2">
    <button class="pear-btn pear-btn-danger  pear-btn-sm" lay-event="exit">
        强退
    </button>
</script>


<script type="text/html" id="logtype-column">
    {{# if(d.loggingType == 'LOGIN' ){ }}
    <div>登录</div>
    {{# }else{ }}
    <div>操作</div>
    {{# } }}
</script>

<script type="text/html" id="success-column">
    {{# if(d.success == 'false' ){ }}
    <div style="color: #f56c6c">失败</div>
    {{# }else{ }}
    <div style="color: #36b368">成功</div>
    {{# } }}
</script>

<script type="text/html" id="deliver-column">
    {{# if(d.deliverStatus == 1){ }}
    <button type="button" class="fs13 tag-item tag-item-normal layui-btn layui-btn-primary layui-btn-sm">已发货</button>
    {{# }else{ }}
    <button type="button" class="fs13 tag-item tag-item-warm layui-btn layui-btn-primary layui-btn-sm">未发货</button>
    {{# } }}
</script>

<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script th:src="@{/component/my/const.js}"></script>

<script>

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            }
        );
    }

    /**
     * 点击展示正常尺寸图片
     * @param t
     */
    function showImg(t) {
        let $ = layui.jquery;
        let x = $(t).find("img");
        layer.open({
            type: 1,
            shadeClose: true,
            title: false,
            closeBtn: 0,
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align: center"><img src="' + $(x).attr('src') + '"></div>'
        })
    }

    layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'element', 'button'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let drawer = layui.drawer;
        let dropdown = layui.dropdown;
        let element = layui.element;
        let button = layui.button;

        element.on('tab(tab)', function (data) {
            console.log(data);
            console.log(data.index);
            if (data.index == 2) {
                $.ajax({
                    url: suffix + "/version/get",
                    dataType: 'json',
                    type: 'get',
                    success: function (res) {
                        if (res.data.update == 'true') {
                            layer.alert(res.data.info, {title: '有新的更新信息'});
                            $(".layui-badge-dot").hide();
                            table.reload("user-table3")
                        } else {
                            $(".layui-badge-dot").hide();
                        }
                    }
                })
            }
        });

        $("#backup").on('click', function () {
            let loading = layer.load(0, {shade: 0.3});
            $.ajax({
                url: suffix + "/back/back",
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 0) {
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 1000
                        }, function () {
                            table.reload('user-table')
                        });
                    } else {
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 700
                        });
                    }
                }
            })
        })
        $("#download").on('click', function () {
            window.location.href = suffix + "/back/downloads";
        })

        let cols = [
            [
                // {type: 'checkbox'},
                {title: '文件名', field: 'fileName', align: 'center'},
                {title: '文件大小/KB', field: 'fileSize', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#user-bar'}
            ]
        ]
        let cols2 = [
            [
                {title: '会话ID', field: 'token', align: 'center'},
                {title: '用户ID', field: 'adminId', align: 'center'},
                {title: '用户', field: 'name', align: 'center'},
                // {title: '信息', field: 'info', align: 'center'},
                // {title: '登录时间', field: 'loginTime', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#user-bar2'}
            ]
        ]
        // 在线用户列表
        table.render({
            elem: '#user-table2',
            url: suffix + '/online/list',
            page: true,
            cols: cols2,
            skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: ['', '', ''],
            done: function (res, curr, count) {
            }
        });
        // 备份
        table.render({
            elem: '#user-table',
            url: suffix + '/back/list',
            page: true,
            cols: cols,
            skin: 'line',
            defaultToolbar: ['', '', ''],
            done: function (res, curr, count) {
            }
        });

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'delete') {
                window.delete(obj);
            } else if (obj.event === 'download') {
                window.download(obj);
            }
        });
        table.on('tool(user-table2)', function (obj) {
            if (obj.event === 'exit') {
                window.exit(obj);
            }
            if (obj.event === 'download') {
                window.download(obj);
            }
        });

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        table.on('toolbar(user-table2)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(user-query)', function (data) {
            table.reload('user-table', {
                where: {
                    cond: data.field.cond
                }
            })
            return false;
        });

        window.exit = function (obj) {
            console.log(obj)
            layer.confirm('确定退出', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: suffix + "/online/exit",
                    dataType: 'json',
                    data: {token: obj.data['token']},
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.download = function (obj) {
            $.ajax({
                url: suffix + "/back/check",
                dataType: 'json',
                data: {fileName: obj.data.fileName},
                type: 'get',
                success: function (res) {
                    if (res.code == 0) {
                        window.location.href = suffix + "/back/download?fileName=" + obj.data.fileName;
                    } else {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 700
                        });
                    }
                }
            })
        }

        window.delete = function (obj) {
            $.ajax({
                url: suffix + "/back/delete",
                dataType: 'json',
                data: {fileName: obj.data.fileName},
                type: 'post',
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 700
                        }, function () {
                            table.reload('user-table')
                        });
                    } else {
                        layer.msg(res.msg, {
                            icon: 2,
                            time: 700
                        });
                    }
                }
            })
        }


        window.add = function () {
            layer.open({
                type: 2,
                content: suffix + '/mall/add',
                area: ['600px', '684px'],
                title: '添加'
            });
        }


        window.remove = function (obj) {
            layer.confirm('确定删除', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: suffix + "/mall/deleteOne",
                    dataType: 'json',
                    data: {mallId: obj.data['mallId']},
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                obj.del();
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.batchRemove = function (obj) {
            let data = table.checkStatus(obj.config.id).data;
            if (data.length === 0) {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }
            let ids = "";
            for (let i = 0; i < data.length; i++) {
                ids += data[i].goodId + ",";
            }
            ids = ids.substr(0, ids.length - 1);
            layer.confirm('确定删除', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: suffix + "/goods/deletes",
                    dataType: 'json',
                    data: {ids: ids},
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.success) {
                            layer.msg(result.msg, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('user-table');
                            });
                        } else {
                            layer.msg(result.msg, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.refresh = function (param) {
            table.reload('user-table');
        }

        $("#reset").click(function () {
            $("input[name='realName']").val('');
            table.reload('user-table', {
                where: {
                    cond: ''
                }
            })
        });


    })
</script>
</body>
</html>
